<template>
  <el-scrollbar>
    <el-container class="home-container">
      <el-header>
        <!-- 图标字体按钮 -->
        <div>
          <div class="ico">
            <i class="iconfont iconzuzhijiagou"></i>
          </div>
          <span class="ziti">流程存为文档</span>
        </div>
        <div class="btns">
          <div class="ico2">
            <i class="iconfont  iconcaidan"></i>
          </div>
        </div>
      </el-header>
      <!-- 主题内容 -->
      <!-- 常用条件 -->
      <div style="height:748.281px;background-color:#fff">
        <el-collapse v-model="activeNames" @change="handleChange">
          <div style="background:#ffffff;width:100%;">
            <el-collapse-item title="常用条件" name="1" class="cytj">
              <div>
                <el-row
                  type="flex"
                  justify="space-between"
                  style=" border-top: 1px solid #ebeef5;"
                >
                  <el-col :span="12">
                    <span
                      style="width:200px;font-size:12px;line-height:30px!important;"
                      >流程标题:</span
                    >
                    <el-input type=""></el-input>
                  </el-col>
                  <el-col :span="12">
                    <span
                      style="width:200px;font-size:12px;line-height:30px!important;"
                      >流程编号:</span
                    >
                    <el-input type=""></el-input>
                  </el-col>
                </el-row>
              </div>
              <div>
                <el-row type="flex" justify="space-between">
                  <el-col :span="12">
                    <span
                      style="width:200px;font-size:12px;line-height:30px!important;"
                      >类型:</span
                    >
                    <el-input
                      type=""
                      suffix-icon="iconfont  iconsousuo"
                      clearable
                      @clear="getUserList"
                    >
                    </el-input>
                  </el-col>
                  <el-col :span="12">
                    <span
                      style="width:200px;font-size:12px;line-height:30px!important;"
                      >所属路径:</span
                    >
                    <el-input
                      type=""
                      suffix-icon="iconfont  iconsousuo"
                      clearable
                      @clear="getUserList"
                    >
                    </el-input>
                  </el-col>
                </el-row>
              </div>
              <div>
                <el-row type="flex" justify="space-between">
                  <el-col :span="12">
                    <span
                      style="width:200px;font-size:12px;line-height:30px!important;"
                      >紧急程度:</span
                    >
                    <el-select v-model="value" style="width: 100%;">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="12">
                    <span 
                      style="width:200px;font-size:12px;line-height:30px!important;"
                      >创建人:</span
                    >
                   
                    <el-select v-model="value1" style="" >
                      <el-option
                        v-for="item in option"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>

                    <el-input
                      
                      type=""
                      style="padding-left:10px;width:60%"
                      suffix-icon="iconfont  iconsousuo"
                      clearable
                      @clear="getUserList"
                    >
                    </el-input>
                    
                  </el-col>
                </el-row>
              </div>
            </el-collapse-item>
          </div>
        </el-collapse>
        <!-- 其他条件 -->
        <el-collapse v-model="activeNames" @change="handleChange">
          <div style="background:#ffffff;width:100%;">
            <el-collapse-item title="其他条件" name="2" class="cytj">
              <div>
                <el-row
                  type="flex"
                  justify="space-between"
                  style=" border-top: 1px solid #ebeef5;"
                >
                  <el-col :span="12">
                    <span
                      style="width:200px;font-size:12px;line-height:30px!important;"
                      >创建人部门:</span
                    >
                    <el-input type="" suffix-icon="iconfont  iconsousuo"
                      clearable
                      @clear="getUserList"></el-input>
                  </el-col>
                  <el-col :span="12">
                    <span
                      style="width:200px;font-size:12px;line-height:30px!important;"
                      >创建人分部:</span
                    >
                    <el-input type="" suffix-icon="iconfont  iconsousuo"
                      clearable
                      @clear="getUserList"></el-input>
                  </el-col>
                </el-row>
              </div>
              <div>
                <el-row type="flex" justify="space-between">
                  <el-col :span="12">
                    <span
                      style="width:200px;font-size:12px;line-height:30px!important;"
                      >创建日期:</span
                    >
                    <el-select v-model="value" style="width: 100%;">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="12">
                    <span
                      style="width:200px;font-size:12px;line-height:30px!important;"
                      >接受日期:</span
                    >
                    <el-select v-model="value" style="width: 100%;">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </div>
              <div>
                <el-row type="flex" justify="space-between">
                  <el-col :span="12">
                    <span
                      style="width:200px;font-size:12px;line-height:30px!important;"
                      >处理状态:</span
                    >
                    <el-select v-model="value2" style="width: 100%;">
                      <el-option
                        v-for="item in clzt"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="12">
                    <span
                      style="width:200px;font-size:12px;line-height:30px!important;"
                      >归档状态:</span
                    >
                    <el-select v-model="value3" style="width: 100%;">
                      <el-option
                        v-for="item in gdzt"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </div>
              <div>
                <el-row type="flex" justify="space-between">
                  <el-col :span="12">
                    <span
                      style="width:200px;font-size:12px;line-height:30px!important;"
                      >流程状态:</span
                    >
                    <el-select v-model="value4" style="width: 100%;">
                      <el-option
                        v-for="item in lczt"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value6"
                      >
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="12">
                    <span
                      style="width:200px;font-size:12px;line-height:30px!important;"
                      >节点类型:</span
                    >
                    <el-select v-model="value5" style="width: 100%;">
                      <el-option
                        v-for="item in jdlx"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </div>
              <div>
                <el-row type="flex" justify="space-between">
                  <el-col :span="12">
                    <span
                      style="width:200px;font-size:12px;line-height:30px!important;"
                      >未操作者:</span
                    >
                    <el-input
                      type=""
                      suffix-icon="iconfont  iconsousuo"
                      clearable
                      @clear="getUserList"
                    >
                    </el-input>
                  </el-col>
                  <el-col :span="12">
                    <span
                      style="width:200px;font-size:12px;line-height:30px!important;"
                      >相关文档:</span
                    >
                    <el-input
                      type=""
                      suffix-icon="iconfont  iconsousuo"
                      clearable
                      @clear="getUserList"
                    >
                    </el-input>
                  </el-col>
                </el-row>
              </div>
              <div>
                <el-row type="flex" justify="space-between">
                  <el-col :span="12">
                    <span
                      style="width:200px;font-size:12px;line-height:30px!important;"
                      >人力资源:</span
                    >
                    <el-input
                      type=""
                      suffix-icon="iconfont  iconsousuo"
                      clearable
                      @clear="getUserList"
                    >
                    </el-input>
                  </el-col>
                  <el-col :span="12">
                    <span
                      style="width:200px;font-size:12px;line-height:30px!important;"
                      >相关客户:</span
                    >
                    <el-input
                      type=""
                      suffix-icon="iconfont  iconsousuo"
                      clearable
                      @clear="getUserList"
                    >
                    </el-input>
                  </el-col>
                </el-row>
              </div>
              <div>
                <el-row type="flex" justify="space-between">
                  <el-col :span="12">
                    <span
                      style="width:200px;font-size:12px;line-height:30px!important;"
                      >相关项目:</span
                    >
                    <el-input
                      type=""
                      suffix-icon="iconfont  iconsousuo"
                      clearable
                      @clear="getUserList"
                    >
                    </el-input>
                  </el-col>
                  <el-col :span="12"> </el-col>
                </el-row>
              </div>
            </el-collapse-item>
          </div>
        </el-collapse>
      </div>
      <div  class="footer">
        <div class="btn">
        <el-row style="display: flex;justify-content: center;padding-top:0px!important">
        <el-button type="primary" class="btn-self">搜    索</el-button>
        <el-button plain  class="btn-cz">重    置</el-button>
        </el-row>
        </div>
      </div>
    </el-container>
  </el-scrollbar>
</template>
<script>
export default {
  data() {
    return {
      activeNames: ['1', '2'],
      options: [
        {
          value: '',
          label: ''
        },
        {
          value: '选项2',
          label: '正常'
        },
        {
          value: '选项3',
          label: '重要'
        },
        {
          value: '选项4',
          label: '紧急'
        }
      ],
      value: '',
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      value5: '',
     

      option: [
        {
          value: '',
          label: ''
        },
        {
          value: '选项2',
          label: '员工'
        },
        {
          value: '选项3',
          label: '客户'
        }],
      clzt:[ {
          value: '选项一',
          label: '全部'
        },
        {
          value: '选项2',
          label: '待办'
        },
        {
          value: '选项3',
          label: '已办'
        }],
      gdzt:[ {
          value: '选项一',
          label: '全部'
        },
        {
          value: '选项2',
          label: '已归档'
        },
        {
          value: '选项3',
          label: '未归档'
        }],
      lczt:[ {
          value6: '选项一',
          label: '有效'
        },
        {
          value: '选项2',
          label: '无效'
        },
        {
          value: '选项3',
          label: '全部'
        }],
      jdlx:[ {
          value: '选项一',
          label: '创建'
        },
        {
          value: '选项2',
          label: '批准'
        },
        {
          value: '选项3',
          label: '提交'
        },
        {
          value: '选项4',
          label: '归档'
        }],  

    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    //获取列表数据
    getUserList() {},
    handleChange(val) {
      console.log(val)
    }
  }
}
</script>
<style lang="less" scoped>
.home-container {
  height: 100%;
  margin: 0;
  padding: 0;
}
.el-header {
  height: 52px !important;
  position: relative;
  background-color: #f9f9f9;
  border-bottom: 1px solid #dadada;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
  cursor: pointer;
  border-bottom: 0px;
}
.ico {
  display: inline-block;
  vertical-align: middle;
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  border-radius: 50%;
  margin-right: 10px;
  color: #fff;
  background-color: #0079de;
  i {
    font-size: 22px;
  }
}
.ziti {
  font-size: 14px;
}
.btns {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.iconfont {
  font-size: 22px !important;
}
.ico2 {
  line-height: 42px;
  padding-left: 14px;
}
// 主题内容
.cytj {
  padding: 0 30px 0px 32px;
}
.el-row {
  padding-top: 16px;
}
.el-col {
  display: flex;
  justify-content: space-between;
  padding: 0px 10px 0px 30px;
}
.footer {
  position: relative;
  background-color: #ffffff;
  width: 100%;
  height: 60px;
  line-height: 60px;
  display: flex;
  justify-content: center;
  align-items: center; 
}
.btn{
  position: absolute;
  width: 100%;
  border-top:1px solid #dadada;
  padding-top: 15px;
}
.btn-self{
  box-sizing: border-box;
  padding: 5px 15px;
  line-height: 1.6;
  font-size: 12px;
  width: 80px;
  height: 28px;
  background-color: #2db7f5;
  border-color: #2db7f5;
}
.btn-cz{
  box-sizing: border-box;
  padding: 5px 15px;
  line-height: 1.6;
  font-size: 12px;
  width: 80px;
  height: 28px;
}
</style>
<style lang="less">
.el-collapse-item__header {
  height: 45px !important;
  font-size: 12px !important;
  border-bottom: 0px !important;
}
.el-collapse-item__wrap {
  border-bottom: 0px !important;
}
.el-input__inner {
  height: 30px !important;
  line-height: 30px !important;
  border-radius: 0px !important;
}
.el-input__icon {
  line-height: 30px !important;
}
.el-main {
  padding: 10px !important;
}
</style>